<template>
  <div>
    <div class="search-con">
      <Input clearable placeholder="输入关键字搜索" class="search-input"/>
      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
    </div>
    <Table
      :data="insideTableData"
      :columns="insideColumns"
      :stripe="stripe"
      :loading="loading"
      :height="height"/>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="pageTotal"
              :current="pageNum"
              :page-size="pageLimit"
              :show-sizer="showSizer"
              :show-elevator="showElevator"
              :show-total="showTotal"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTables',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    pageTotal: {
      type: Number
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageLimit: {
      type: Number,
      default: 20
    },
    showSizer: {
      type: Boolean,
      default: false
    },
    showElevator: {
      type: Boolean,
      default: false
    },
    showTotal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      insideColumns: [],
      insideTableData: []
    }
  },
  methods: {
    handleColumns(columns) {
      this.insideColumns = columns.map((item, index) => {
        let res = item
        res.type === 'index' && (res.indexMethod = (p) => p.initRowIndex)
        return res
      })
    },
    handleTableData() {
      this.insideTableData = this.value.map((item, index) => {
        let res = item
        res.initRowIndex = (this.pageNum - 1) * this.pageLimit + (index + 1);
        return res
      })
    },
    onPageChange(val) {
      this.$emit('on-page-change', val)
    },
    onPageSizeChange(val) {
      this.$emit('on-page-size-change', val)
    }
  },
  watch: {
    columns(columns) {
      this.handleColumns(columns)
    },
    value(val) {
      this.handleTableData()
    }
  },
  mounted() {
    this.handleColumns(this.columns)
    this.handleTableData()
  }
}
</script>
